<div class="page">
    <h1>多行文本输入框 Textarea</h1>
    <div class="line"></div>
    <br>

    <div id="inputBox"></div>
    <br>
    <p>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="getEvent">get 取值方法</button>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="setEvent">set 赋值方法</button>
        <span style="padding:0 0 20px 0">验证方法为 ：notNull (不为空)</span>
    </p>
    <br>
    <p>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="readonly">readonly 设置为只读状态</button>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="unReadonly">unReadonly 取消只读状态</button>
    </p>
    <br>
    <p>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="showErrorStyle">showErrorStyle 显示错误状态</button>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="hideErrorStyle">hideErrorStyle 清除错误状态</button>
    </p>
    <br>

    <pre class="line-numbers"><code class="language-js">// 创建 textarea
var textareaDemo = new icu.formElement.textarea({
    verify: {  // rules 对象 参照多规则验证集合文档 中的说明进行设置
        text: '测试输入框',
        rules: 'notNull'
    },
    readonly: false, // 设置是否只读
    placeholder: '测试textarea内容', // 设置未填写输入框时的提示语句
    height: 150,  //初始高度
    width: '', //初始宽度 默认100%
    resize: 'none', //是否可拖拽   vertical 纵向 / horizontal 横向 / both 任意方向 / none 不能拖拽 
    useTabSpace: true,  // 是否使用tab进行缩进
    useTabSpaceWidth: 4, // 缩进的空格数量
    aotoHeight: true, // 自动行高
    errorStyle: 'form-error', // 自定义表单元素出现错误时的外层样式
    onChange: function (value) { // 当输入框发生改变时的回调方法
        // value 为改变后的值
        // this 指向当前 Input 对象
    },
    onError: function (errorMessage,value) { // 当输入框输入的值未通过验证时的回调方法
        // errorMessage 为提示的错误信息
        // value 为改变后的值
        // this 指向当前 Input 对象
    },
});

// 渲染
$('body').append(textareaDemo.html);

// 取值方法
textareaDemo.get(function(errorMessage,value){
    // errorMessage 为提示的错误信息
    // value 为改变后的值
    if (errorMessage) {
        icu.alert.error({
            text: errorMessage
        });
    } else {
        icu.alert.normal({
            text: value
        });
    }
});

// 赋值方法
textareaDemo.set('String');

// 可异步绑定的change方法
// 绑定后会替换初始对象中的 onChange 方法
textareaDemo.onChange(function(value){
    // value 为改变后的值
    // this 指向当前 Input 对象
});

// 显示错误样式
textareaDemo.showErrorStyle();

// 隐藏错误样式
textareaDemo.hideErrorStyle();

// 设置只读状态
textareaDemo.readonly(true); // 设置为只读状态
textareaDemo.readonly(false); // 取消只读状态
</code></pre>


</div>